import { Viewer, Worker } from "@/biz-components/pdf-view/core";

import { defaultLayoutPlugin } from "./plugin/default-layout";

import { FC, useMemo } from "react";
import { getLocale } from "umi";

import zhCn from "./core/context/localization/zh-CN.json";
import enUs from "./core/context/localization/en-US.json";

export interface PdfViewProps {
  fileUrl: string;
  height?: number | string;
}

const PdfView: FC<PdfViewProps> = ({ fileUrl, height }) => {
  const defaultLayoutPluginInstance = defaultLayoutPlugin({
    toolbarPlugin: {
      printPlugin: {
        enableShortcuts: false,
      },
      zoomPlugin: {
        enableShortcuts: true,
      },
    },
  });

  const localization = useMemo(() => {
    const locale = getLocale();

    return locale === "zh-CN" ? zhCn : enUs;
  }, []);

  return (
    <div
      style={{
        height,
      }}
    >
      <Worker workerUrl="/pdfjs/pdf.worker.min.js">
        <Viewer
          fileUrl={fileUrl}
          plugins={[defaultLayoutPluginInstance]}
          localization={localization}
          characterMap={{
            url: "/pdfjs/cmaps/",
            isCompressed: true,
          }}
        />
      </Worker>
    </div>
  );
};

PdfView.defaultProps = {
  height: 600,
};

export default PdfView;